<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录云盘账户</title>
  <!-- Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <!-- 引入Google字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    
    .container {
      width: 100%;
      max-width: 450px;
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      transition: transform 0.3s ease;
    }
    
    .container:hover {
      transform: translateY(-5px);
    }
    
    .header {
      background: linear-gradient(to right, #4a00e0, #8e2de2);
      color: white;
      padding: 30px;
      text-align: center;
      position: relative;
    }
    
    .header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(to right, #00c6ff, #0072ff);
    }
    
    .header h1 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 8px;
      letter-spacing: 1px;
    }
    
    .header p {
      opacity: 0.9;
      font-size: 15px;
      font-weight: 300;
    }
    
    .form-container {
      padding: 30px;
    }
    
    .form-group {
      margin-bottom: 25px;
      position: relative;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 10px;
      font-weight: 500;
      color: #333;
      font-size: 15px;
      display: flex;
      align-items: center;
    }
    
    .required-star {
      color: #e74c3c;
      margin-right: 5px;
    }
    
    .input-container {
      position: relative;
      display: flex;
      align-items: center;
    }
    
    .input-icon {
      position: absolute;
      left: 15px;
      color: #6a11cb;
      z-index: 1;
    }
    
    .form-group input {
      width: 100%;
      padding: 14px 15px 14px 45px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 15px;
      transition: all 0.3s;
      background-color: #f9f9f9;
    }
    
    .form-group input:focus {
      border-color: #6a11cb;
      box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.1);
      outline: none;
      background-color: #fff;
    }
    
    .password-toggle {
      position: absolute;
      right: 15px;
      background: none;
      border: none;
      color: #777;
      cursor: pointer;
      font-size: 14px;
    }
    
    .btn-submit {
      width: 100%;
      padding: 16px;
      background: linear-gradient(to right, #4a00e0, #8e2de2);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 10px;
      letter-spacing: 1px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .btn-submit:hover {
      background: linear-gradient(to right, #3a00c0, #7e1dc2);
      transform: translateY(-2px);
      box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
    }
    
    .btn-submit:active {
      transform: translateY(0);
    }
    
    .btn-submit i {
      margin-right: 8px;
    }
    
    .register-link {
      text-align: center;
      margin-top: 25px;
      font-size: 14px;
      color: #666;
    }
    
    .register-link a {
      color: #6a11cb;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.2s;
    }
    
    .register-link a:hover {
      text-decoration: underline;
      color: #4a00e0;
    }
    
    .success-message {
      background-color: #d4edda;
      color: #155724;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 20px;
      text-align: center;
      display: none;
      animation: fadeIn 0.5s;
    }
    
    .error-message {
      color: #e74c3c;
      font-size: 13px;
      margin-top: 5px;
      display: none;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .footer {
      text-align: center;
      padding: 15px;
      font-size: 12px;
      color: #999;
      border-top: 1px solid #eee;
    }
    
    .loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16px;
      display: none;
      z-index: 10;
    }
    
    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #6a11cb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    @media (max-width: 480px) {
      .container {
        max-width: 100%;
      }
      
      .form-container {
        padding: 20px;
      }
      
      .header {
        padding: 20px;
      }
      
      .header h1 {
        font-size: 26px;
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <div class="loading-overlay" id="loadingOverlay">
        <div class="spinner"></div>
      </div>
      
      <div class="header">
        <h1><i class="fas fa-sign-in-alt"></i> 登录云盘账户</h1>
        <p>欢迎回到您的个人云存储空间</p>
      </div>
      
      <div class="form-container">
        <form @submit.prevent="onSignin">
          <div class="form-group">
            <label for="username">
              <span class="required-star">*</span> 用户名
            </label>
            <div class="input-container">
              <i class="fas fa-user input-icon"></i>
              <input id="username" type="text" v-model="username" placeholder="请输入用户名" required>
            </div>
            <div class="error-message" id="username-error"></div>
          </div>
          
          <div class="form-group">
            <label for="password">
              <span class="required-star">*</span> 密码
            </label>
            <div class="input-container">
              <i class="fas fa-lock input-icon"></i>
              <input id="password" :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="请输入密码" required>
              <button type="button" class="password-toggle" @click="togglePasswordVisibility">
                <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
              </button>
            </div>
            <div class="error-message" id="password-error"></div>
          </div>
          
          <button type="submit" class="btn-submit" :disabled="loading">
            <i class="fas fa-sign-in-alt"></i> {{ loading ? '登录中...' : '登录账户' }}
          </button>
        </form>
        
        <div class="register-link">
          还没有账户？<a href="/static/view/signup.html">立即注册</a>
        </div>
      </div>
      
      <div class="footer">
        © 2025 花生云盘服务 | 安全可靠的云端存储解决方案
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        username: '',
        password: '',
        showPassword: false,
        loading: false
      },
      methods: {
        togglePasswordVisibility() {
          this.showPassword = !this.showPassword;
        },
        onSignin() {
          // 清除之前的错误信息
          $('.error-message').hide();
          
          // 简单验证
          let isValid = true;
          
          if (this.username.length < 1) {
            $('#username-error').text('请输入用户名').show();
            isValid = false;
          }
          
          if (this.password.length < 1) {
            $('#password-error').text('请输入密码').show();
            isValid = false;
          }
          
          if (!isValid) {
            return;
          }
          
          // 设置加载状态
          this.loading = true;
          document.getElementById('loadingOverlay').style.display = 'flex';
          
          // 使用原有的AJAX逻辑
          $.ajax({
            url: "/user/signin",
            type: "POST",
            data: {
              "username": this.username,
              "password": this.password
            },
            error: function (jqXHR, textStatus, errorThrown) {
              if (textStatus == "error") {
                alert(textStatus + " : " + errorThrown);
              } else {
                alert(textStatus);
              }
              this.loading = false;
              document.getElementById('loadingOverlay').style.display = 'none';
            }.bind(this),
            success: function (body, textStatus, jqXHR) {
              try {
                var resp = JSON.parse(body);
                localStorage.setItem("token", resp.data.Token)
                localStorage.setItem("username", resp.data.Username)
                window.location.href = resp.data.Location;
              } catch (e) {
                alert('登录响应格式错误');
                this.loading = false;
                document.getElementById('loadingOverlay').style.display = 'none';
              }
            }.bind(this)
          });
        }
      },
      mounted() {
        // 检查是否已有token，如果有则直接跳转
        const token = localStorage.getItem("token");
        const username = localStorage.getItem("username");
        
        if (token && username) {
          this.username = username;
          // 可以添加自动登录逻辑，这里仅显示提示
          console.log("检测到已登录用户:", username);
        }
      }
    });
  </script>
</body>
</html>